<template>
	<view class="orderListDetail">
		<view class="titleWrap">
			<p class="line">
				<span>收货人：{{ name }}</span>
				<span>{{ mobile }}</span>
			</p>
			<p>
				<image src="../../../static/img/gray.png" mode=""></image>
				<span class="address">{{ address }}</span>
			</p>
		</view>

		<view class="productWrap">
			<view class="item">
				<view class="left">
					<span>{{ productName }}</span>
					<span class="amount">x 1</span>
				</view>
				<view class="right">￥{{ money }}</view>
			</view>
		</view>

		<view class="orderMation">
			<view class="orderItem">
				<p>
					<span>订单编号</span>
					<span v-text="id"></span>
				</p>
				<p>
					<span>下单时间</span>
					<span>{{ createTime }}</span>
				</p>
			</view>
			<view class="orderItem">
				<p>
					<span>支付方式</span>
					<span>{{ payType }}</span>
				</p>
				<p>
					<span>买家留言</span>
					<span v-text="remark"></span>
				</p>
			</view>
		</view>
		<view class="listFooter" v-if="status !=='cancel'">
			<view class="numListMoney">
				<p>
					<span>商品总价</span>
					<span>¥{{ money }}</span>
				</p>
			</view>
			<p>
				<button v-if="status ==='init'" type="primary" class="groupbuyOrderPay" :loading="loading"
					@click="groupbuyOrderPay">立即支付</button>
				<span v-else>
					实付款：
					<!-- <span>¥{{ detailData.totalMoney - detailData.surplus }}</span> -->
					<span>¥{{ money }}</span>
				</span>
			</p>
		</view>
	</view>
</template>

<script>
	import API from '@/common/api';
	import utils from '@/common/utils';
	export default {
		data() {
			return {
				title: '订单详情',
				name: '',
				mobile: 15982329200,
				address: '美城',
				productName: '',
				createTime: '',
				money: '',
				id: '',
				payType: '',
				remark: '',
				status: '',
			};
		},
		components: {},
		onLoad(e) {
			console.log(e, "onload 传的参数")
			this.getProductDetail(e.id);
		},
		methods: {
			async groupbuyOrderPay() {
				let json = await API.groupbuyOrderPay({
					targetId: this.id
				});
				if (json.code == 200) {
					this.requestPay(json)
				}
			},
			requestPay(json) {
				let paymentData = json.data.thirdPayInfo;
				console.log(paymentData, "22222")
				uni.requestPayment({
					// appId: paymentData.appId,
					timeStamp: paymentData.timeStamp,
					nonceStr: paymentData.nonceStr,
					package: paymentData.packageValue,
					signType: 'MD5',
					paySign: paymentData.paySign,
					success: (res) => {
						uni.showToast({
							title: "支付成功!"
						})

						setTimeout(() => {
							console.log("支付成功后跳转到我的页面")
							uni.navigateTo({
								url: './index'
							})
						}, 300);

					},
					fail: (res) => {
						uni.showModal({
							content: '支付失败或取消，您可以在个人中心继续支付。',
							showCancel: false
						})
					},
					complete: () => {
						this.loading = false;
					}
				})
			},
			async getProductDetail(id) {
				let json = await API.groupbuyOrderDetail({
					targetId: id
				});
				if (json.code == 200) {
					this.name = json.data.name;
					this.address = json.data.address;
					this.mobile = json.data.mobile;
					this.productName = json.data.productName;
					this.money = json.data.money / 100;
					this.createTime = utils.timestampToFormatString(json.data.createTime);
					this.id = json.data.id;
					this.status = json.data.status;
					this.payType = json.data.payType === 'wxpay_online' ? '微信支付' : '无';
					this.remark = json.data.remark || '无';
				}
			}
		}
	};
</script>

<style lang="less">
	.orderListDetail {
		color: #101010;

		.titleWrap {
			padding: 1rem;
			text-align: left;
			line-height: 1.6rem;
			background: #fff;
			border-bottom: 10px solid #f3f2f2;

			p {
				margin: 0;
				font-size: 15px;
				color: rgba(16, 16, 16, 1);

				image {
					width: 18px;
					height: 18px;
					margin-right: 10px;
				}

				.express {
					margin-right: 2rem;
				}

				span:first-child {
					margin-right: 2.5rem;
				}
			}

			.line {
				padding-left: 30px;
			}
		}

		.productWrap {
			width: 100%;
			padding: 0.3rem 0.8rem;
			background: #fff;
			box-sizing: border-box;

			.item {
				// font-size: 15px;
				margin: 0.5rem 0;
				width: 100%;
				box-sizing: border-box;
				border-bottom: 1px solid #eee;
				display: flex;
				justify-content: space-between;

				.left {
					// display: flex;
					// flex-direction: column;
					// text-align: left;
					// font-size: 15px;
					width: 74%;
					letter-spacing: 0;
					overflow: hidden;
					display: -webkit-box;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					/*要显示的行数*/
					-webkit-box-orient: vertical;

					.amount {
						margin-left: 10px;
					}
				}

				.right {
					width: 20%;
					display: flex;
					font-size: 14px;
					justify-content: flex-end;
					align-items: center;
					color: #101010;
				}
			}

			.item:last-child {
				border: none;
				padding-bottom: 0;
			}
		}

		.orderMation {
			border-top: 10px solid #f3f2f2;
			border-bottom: 10px solid #f3f2f2;
			background: #fff;
			margin-top: 0.5rem;

			.orderItem {
				text-align: left;
				padding: 0.5rem 0;
				margin-left: 0.9rem;
				line-height: 2rem;

				p {
					margin: 0;
					color: rgba(16, 16, 16, 1);
					font-size: 15px;

					span:first-child {
						margin-right: 1.5rem;
					}
				}
			}

			.orderItem:first-child {
				border-bottom: 1px solid #f3f2f2;
			}
		}

		.listFooter {
			background: #fff;
			flexGrow: 1; //铺满盒子剩余空间

			.numListMoney {
				padding: 0.6rem 15px 0.6rem 0;
				margin-left: 0.9rem;
				color: rgb(16, 16, 16) 100%;
				font-size: 15px;
				border-bottom: 1px solid #f3f2f2;

				p {
					margin: 0;
					width: 100%;
					display: flex;
					padding: 0;

					justify-content: space-between;

					span {
						line-height: 21px;
					}
				}
			}

			p {
				margin: 1rem 0;
				text-align: right;
				padding-right: 15px;
				font-size: 15px;
				padding-bottom: 0.6rem;

				span {
					span {
						color: #f90505;
					}
				}
			}

			.groupbuyOrderPay {
				margin-left: 14px;
			}
		}
	}
</style>
